<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>话题创建测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .output {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            min-height: 200px;
            white-space: pre-wrap;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-y: auto;
            max-height: 400px;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .api-section {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .api-section h3 {
            margin-top: 0;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>话题创建测试</h1>
        
        <div class="api-section">
            <h3>1. 创建话题API测试</h3>
            <div class="form-group">
                <label for="topicMessage">消息内容：</label>
                <textarea id="topicMessage" placeholder="请输入消息内容，例如：请为创作类型'情感共鸣类'生成5个话题，要求：1. 分析目标用户群体 2. 生成5个具体的话题标题和描述 3. 明确每个话题的创作目的 4. 提供整体创作策略">请为创作类型'情感共鸣类'生成5个话题，要求：
1. 分析目标用户群体
2. 生成5个具体的话题标题和描述
3. 明确每个话题的创作目的
4. 提供整体创作策略</textarea>
            </div>
            <button onclick="testCreateTopicApi()">测试创建话题API</button>
        </div>

        <div class="api-section">
            <h3>2. 创建话题完整流程测试</h3>
            <div class="form-group">
                <label for="token">Token (URL参数)：</label>
                <input type="text" id="token" placeholder="请输入token">
            </div>
            <div class="form-group">
                <label for="merId">商户ID：</label>
                <input type="text" id="merId" value="1" placeholder="请输入商户ID">
            </div>
            <button onclick="testCreateTopic()">测试创建话题完整流程</button>
        </div>

        <div class="output" id="output">等待测试...</div>
        <div class="status" id="status" style="display: none;"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080/api/client/index';

        function showStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = `status ${type}`;
            statusDiv.style.display = 'block';
        }

        function appendOutput(text) {
            const output = document.getElementById('output');
            output.textContent += text + '\n';
            output.scrollTop = output.scrollHeight;
        }

        function clearOutput() {
            document.getElementById('output').textContent = '';
        }

        async function testCreateTopicApi() {
            clearOutput();
            showStatus('正在测试创建话题API...', 'info');
            
            const message = document.getElementById('topicMessage').value;
            if (!message.trim()) {
                showStatus('请输入消息内容', 'error');
                return;
            }

            try {
                appendOutput('=== 创建话题API测试 ===');
                appendOutput(`请求URL: ${API_BASE_URL}/createTopicApi`);
                appendOutput(`请求参数: ${JSON.stringify({ message }, null, 2)}`);
                appendOutput('');

                const response = await fetch(`${API_BASE_URL}/createTopicApi`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message })
                });

                appendOutput(`响应状态: ${response.status} ${response.statusText}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status}`);
                }

                const result = await response.json();
                appendOutput(`响应结果: ${JSON.stringify(result, null, 2)}`);
                
                showStatus('创建话题API测试成功', 'success');
                
            } catch (error) {
                appendOutput(`错误: ${error.message}`);
                showStatus(`创建话题API测试失败: ${error.message}`, 'error');
            }
        }

        async function testCreateTopic() {
            clearOutput();
            showStatus('正在测试创建话题完整流程...', 'info');
            
            const token = document.getElementById('token').value;
            const merId = document.getElementById('merId').value;
            
            if (!token.trim()) {
                showStatus('请输入token', 'error');
                return;
            }

            try {
                appendOutput('=== 创建话题完整流程测试 ===');
                appendOutput(`请求URL: ${API_BASE_URL}/createTopic?token=${token}`);
                appendOutput(`请求参数: ${JSON.stringify({ merId: parseInt(merId) }, null, 2)}`);
                appendOutput('');

                const response = await fetch(`${API_BASE_URL}/createTopic?token=${token}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ merId: parseInt(merId) })
                });

                appendOutput(`响应状态: ${response.status} ${response.statusText}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status}`);
                }

                const result = await response.json();
                appendOutput(`响应结果: ${JSON.stringify(result, null, 2)}`);
                
                if (result.code === 200) {
                    appendOutput(`成功创建 ${result.data.length} 个话题`);
                    appendOutput(`话题ID列表: ${result.data.join(', ')}`);
                }
                
                showStatus('创建话题完整流程测试成功', 'success');
                
            } catch (error) {
                appendOutput(`错误: ${error.message}`);
                showStatus(`创建话题完整流程测试失败: ${error.message}`, 'error');
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            appendOutput('话题创建测试页面已加载完成');
            appendOutput('请选择要测试的功能...');
        });
    </script>
</body>
</html> 